<template>
   <div>
      <h1>App 根组件</h1>
      <hr/>
      <TodoInput @add="onAddNewTask" ></TodoInput>
      <TodoList :list="tasklist" class="mt-2" ></TodoList>
      <TodoButton v-model:active="activeBtnIndex" ></TodoButton>
   </div>
</template>

<script>
// 导入 TodoList 组件
import TodoList from './components/todo-list/TodoList.vue'
// 导入 TodoInput 组件
import TodoInput from './components/todo-input/TodoInput.vue'
// 导入 TodoButton 组件
import TodoButton from './components/todo-buttom/TodoButton.vue'

export default {
  name: 'MyApp',
  data(){
    return {
      // 任务列表的数据
      todolist:[
        { id:1,task:'周一早晨9点开会',done:false },
        { id:2,task:'周一晚上8点聚餐',done:false },
        { id:3,task:'准备周三上午的演讲稿',done:true },
      ],
      // 下一个可用的 Id 值
      nextId: 4,
      activeBtnIndex:0
    }
  },
  computed:{
    tasklist(){
      switch(this.activeBtnIndex){
        case 0:
          return this.todolist
        case 1:
          return this.todolist.filter(a=>a.done)
          // 相当于: return this.todolist.filter(a=>a.done === true)
        case 2:
          return this.todolist.filter(a=>!a.done)          
          // 相当于: return this.todolist.filter(a=>a.done !== true)
      }
    }
  },
  methods:{
    onAddNewTask(e){
      // console.log(e)
      this.todolist.push({ id:this.nextId,task:e,done:false })
      this.nextId++
    }
  },
  components:{
    TodoList,
    TodoInput,
    TodoButton
  }
}
</script>

<style lang="less" scoped>

</style>
